<template>
  <div style="width: 85%">

    <v-dialog max-width="1200px" persistent v-model="dialog">

      <v-card>
        <v-card-title style="z-index: 999999999;background-color: paleturquoise">
          <span class="headline">Select ClientPicker</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="10" md="10" sm="10">
                <v-text-field append-icon="" hide-details="auto" label="Search Client Code"
                              v-model="clientCode"></v-text-field>
              </v-col>
              <v-col cols="2" md="2" sm="2" style=" padding-top: 25px; padding-left: 0px;">
                <v-btn @click="Search" class="text-capitalize" color="error">Search</v-btn>
              </v-col>
              <v-col cols="12" md="12" sm="12">
                <v-data-table
                  :headers="clientHeaders"
                  :items="clientList"
                  :single-select="true"
                  class="elevation-1"
                  hide-default-footer
                  item-key="clientCode"
                  show-select
                  v-model="selected"
                >
                </v-data-table>
              </v-col>
              <v-col cols="12" md="12" sm="12">
                <v-data-table
                  :headers="jobHeaders"
                  :items="jobList"
                  :single-select="true"
                  class="elevation-1"
                  hide-default-footer
                  item-key="jobCode"
                  show-select
                  v-model="jobSelected"
                >
                </v-data-table>
              </v-col>
              <v-col cols="12" md="12" sm="12">
                <v-data-table
                  :headers="projectHeaders"
                  :items="projectList"
                  item-key="assgProjectID"
                  :single-select="true"
                  class="elevation-1"
                  hide-default-footer
                  show-select
                  v-model="projectSelected"
                >
                </v-data-table>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="Cancel()" color="blue darken-1" text>Close</v-btn>
          <v-btn @click="Save" color="blue darken-1" text>Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script lang="ts">
  import {Component, Emit, Prop, Vue, Watch} from "vue-property-decorator";
  import {GetClientPicker, GetJobPicker, GetProjectPicker} from '@/request'

  interface SearchClient {
    Keyword?: string;
    CountryCode?: string;
    EntityGroupCode?: string;
    ClientCode?: string;
    JobCode?: string;
    MaxCount?: number;
    AssgnmtID?: number;
    AssgProjectID?: number;
    ExpenseType?: string;
    OUCode?: string;
  }

  @Component({})
  export default class APP extends Vue {
    @Prop(Boolean) dialog!: boolean
    @Prop(Object) TravelAllowance!: Object
    @Prop(Object) searchClient !: SearchClient
    selected: any = []
    clientHeaders: any = [
      {text: 'Client Code', value: 'clientCode'},
      {text: 'Client Name', value: 'clientName'},
      {text: 'Alternate Client Name', value: 'alternateClientName'},
      {text: 'Remark', value: 'remark'}
    ]

    clientList: any = []
    jobList: any = []
    jobSelected: any = []
    jobHeaders: any = [
      {text: 'Job Code', value: 'jobCode'},
      {text: 'Job Description', value: 'jobDesc'},
      {text: 'Charge Type', value: 'chargeType'},
      {text: 'Job Office', value: 'asgOfficeCode'},
      {text: 'MIC', value: 'asgMgrStaffName'},
      {text: 'PIC', value: 'asgPtrStaffName'}
    ]
    projectList: any = []
    projectSelected: any = []
    projectHeaders: any = [
      {text: 'Project Code', value: 'projectCode'},
      {text: 'Project Description', value: 'projectDesc'},
      {text: 'Year', value: 'year'},
      {text: 'Start Date', value: 'startDate'},
      {text: 'End Date', value: 'termDate'},
    ]
    returnValue: any = {}
    clientCode: any = ''


    @Watch('selected')
    onSelectedChangeValue(val: string) {
      if (this.selected.length > 0) {
        this.searchClient.ClientCode = this.selected[0].clientCode;
        if(this.searchClient.AssgnmtID != null)
          this.searchClient.AssgnmtID = 0
        if(this.searchClient.AssgProjectID != null)
          this.searchClient.AssgProjectID = 0
        this.returnValue.clientModel = this.selected[0];
        this.SearchJob();
      }
    }

    @Watch('jobSelected')
    onJobSelectedChangeValue(val: string) {
      if (this.jobSelected.length > 0) {
        console.log(this.jobSelected)
        this.returnValue.jobModel = this.jobSelected[0];
        this.searchClient.AssgnmtID = this.jobSelected[0].assgnmtID;
        this.searchClient.JobCode = this.jobSelected[0].jobCode;
        if(this.searchClient.AssgProjectID != null)
          this.searchClient.AssgProjectID = 0
        this.SearchProject();
      }
    }

    @Watch('projectSelected')
    onprojectSearchModelChangeValue(val: string) {
      if (this.projectSelected.length > 0) {
        this.returnValue.projectModel = this.projectSelected[0];
      }
    }

    Search() {
      this.searchClient.ClientCode = this.clientCode
      GetClientPicker(this.searchClient).then((res: any) => {
        this.clientList = res.data;
      });
    }

    SearchJob() {
      GetJobPicker(this.searchClient).then((res: any) => {
        console.log(res);
        this.jobList = res.data;
      })
    }

    SearchProject() {
      GetProjectPicker(this.searchClient).then((res: any) => {
        this.projectList = res.data;
        console.log(this.projectList)
      })
    }

    SearchDefult(item:SearchClient) {
      this.searchClient = item
      this.clientCode = item.ClientCode
      if (item.ClientCode != null) {
        this.Search();
        this.SearchJob();
      }
      if (item.AssgProjectID != null) {
        this.SearchProject();
      }
    }

    @Emit('eventDialog')
    eventDialog() {
    } // 子传父方法 send方法用来处理传值的逻辑
    @Emit('eventClentValue')
    eventClentValue(eventClentValue: any) {
    }

    Cancel() {
      this.eventDialog()
    }

    Save() {
      this.eventClentValue(this.returnValue)
    }
  }


</script>
<style scoped>

</style>
